<?php
include ('lib/twitese.php');
if(!loginStatus()) {
  header('location: login.php');
}
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex,nofollow">
    <link rel="icon" href="img/favicon.ico" />
    <title>Relations - <?php echo SITE_NAME ?></title>
    <link rel="stylesheet" media="screen" href="css/blueprint/screen.css" />
    <link rel="stylesheet" media="screen" href="css/blueprint/plugins/buttons/screen.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
      #loginContent {
        width: 350px;
        margin: 100px auto;
      }
      button[type] {
        margin: 0.5em 0;
      }
    </style>
  </head>
  <body>
    <div id="loginContent" class="container showgrid">
      <div id="loginResult" style="display:none;">
      </div>
      <form id="loginForm" name="loginForm" method="post" action="">
        <fieldset>
          <legend>Enter information</legend>
          <p>
            <label for="username">Username</label>
            <br />
            <input type="text" id="username" name="username" class="text" size="20" />
          </p>
          <p>
            <label for="password">Password</label>
            <br />
            <input type="password" id="password" name="password" class="text" size="20" />
          </p>
          <p>
            <button type="submit" class="button positive">
              <img alt="ok" src="css/blueprint/plugins/buttons/icons/tick.png" />Login
            </button>
          </p>
        </fieldset>
      </form>
      <ul>
        <li><a href="#friends" id="friends">Friends</a></li>
        <li><a href="#followers" id="followers">Followers</a></li>
        <li><a href="#blocks" id="blocks">Blocks</a></li>
      </ul>
    </div>
  </body>
</html>
<script>
$(document).ready(function(){
  $("form#loginForm").submit(function() { // loginForm is submitted
    var username = $('#username').attr('value'); // get username
    var password = $('#password').attr('value'); // get password

    if (username && password) { // values are not empty
      $.ajax({
        type: "GET",
        url: "/cgi-bin/login.pl", // URL of the Perl script
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        // send username and password as parameters to the Perl script
        data: "username=" + username + "&password=" + password,
        // script call was *not* successful
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
          $('div#loginResult').text("responseText: " + XMLHttpRequest.responseText 
            + ", textStatus: " + textStatus 
            + ", errorThrown: " + errorThrown);
          $('div#loginResult').addClass("error");
        }, // error 
        // script call was successful 
        // data contains the JSON values returned by the Perl script 
        success: function(data){
          if (data.error) { // script returned error
            $('div#loginResult').text("data.error: " + data.error);
            $('div#loginResult').addClass("error");
          } // if
          else { // login was successful
            $('form#loginForm').hide();
            $('div#loginResult').text("data.success: " + data.success 
              + ", data.userid: " + data.userid);
            $('div#loginResult').addClass("success");
          } //else
        } // success
      }); // ajax
    } // if
    else {
      $('div#loginResult').text("enter username and password");
      $('div#loginResult').addClass("error");
    } // else
    $('div#loginResult').fadeIn();
    return false;
  });
  $("#friends").click(function() {
    document.title="Friends - <?php echo SITE_NAME ?>";
  });
  $("#followers").click(function() {
    document.title="Followers - <?php echo SITE_NAME ?>";
  });
  $("#blocks").click(function() {
    document.title="Blocks - <?php echo SITE_NAME ?>";
  });
});
</script>
<?php die ;?>
<pre>
  relations
  ${host}/me/relations
  ${host}/${user}/relations
  ${host}/${user}/relations#blocks
  ${host}/${user}/relations#followers
  ${host}/${user}/relations#friends
</pre>
